<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <#include "/pubHeadStyle.html">
        <link rel="stylesheet" href="${ctx}/css/form.css">
    </head>
    <body>
        <form action="" class="layui-form" id="querysLength">
            <div id="querysField"></div>
            <script type="text/html" id="controlType">
                <div class="layui-input-inline" style="width: calc(100% - 2px);">
                    <select class="layui-yonyou-select controlType" name="ct" lay-filter="controlType">
                        <option value="" class="">请选择</option>
                        <option value="1">单行文本框</option>
                        <option value="15">日期控件</option>
                        <option value="3">数据字典</option>
                        <option value="11">下拉选项</option>
                        <option value="4">人员选择器(单选)</option>
                        <option value="17">角色选择器(单选)</option>
                        <option value="18">组织选择器(单选)</option>
                        <option value="19">岗位选择器(单选)</option>
                    </select>
                </div>
            </script>
            <script type="text/html" id="condition">
                <select class="layui-yonyou-select condition" name="op" lay-filter="condition">
                    <option value=""></option>
                    <option value="1">=</option>
                    <option value="2">!=</option>
                    <option value="3">like</option>
                </select>
            </script>
            <script type="text/html" id="valueFrom">
                <select class="layui-yonyou-select valueFrom" name="vf" lay-filter="valueFrom">
                    <option value=""></option>
                    <option value="1">表单输入</option>
                    <option value="5">动态传入</option>
                </select>
            </script>
            <script type="text/html" id="rowOperation">
                <a class="layui-btn layui-btn-xs" lay-event="moveup">上移</a>
                <a class="layui-btn layui-btn-xs" lay-event="movedown">下移</a>
            </script>
        </form>
        <script>
            layui.config({
                base: serverPath.formPath + staticPath.formPath //静态资源所在路径
            }).extend({
                index: 'index' //主入口模块
            }).use(['index', 'element', 'form', 'layer', 'table', 'jquery', 'formTransfer'], function () {
                var form = layui.form, layer = layui.layer,
                    table = layui.table, transfer = layui.formTransfer;
                var $ = layui.$;
                var tableId = '${tableId}';
                form.render();

                var newLeftArr = [];
                var newRightArr = [];

                if (parent.conditionField == "[]" || undefined == parent.conditionField) {
                    var leftArr = parent.fieldArr;
                    for (var j = 0; j < leftArr.length; j++) {
                        var json = {};
                        json.fieldName = leftArr[j].fieldName;
                        json.fieldDesc = leftArr[j].fieldDesc;
                        json.fieldType = leftArr[j].fieldType;
                        //下拉列表设置默认值
                        json.ct = leftArr[j].controlType;
                        setContTypeVal(json);
                        json.op = "1";
                        json.vf = "1";
                        if (leftArr[j].isEncrypt != 1) {
                            newLeftArr.push(json);
                        }
                    }
                } else {
                    var rightArr = JSON.parse(parent.conditionField);

                    for (var k = 0; k < rightArr.length; k++) {
                        var json = {};
                        json.fieldName = rightArr[k].na;
                        json.fieldDesc = rightArr[k].cm;
                        json.fieldType = rightArr[k].ty;
                        json.op = rightArr[k].op;
                        json.ct = rightArr[k].ct;
                        json.vf = rightArr[k].vf;
                        newRightArr.push(json);
                    }
                    var leftArr = parent.fieldArr;
                    for (var i = 0; i < leftArr.length; i++) {
                        for (var j = 0; j < newRightArr.length; j++) {
                            var leftField = leftArr[i].fieldName;
                            var rightField = newRightArr[j].fieldName;
                            if (leftField == rightField) {
                                break;
                            }
                            if (leftField != rightField && j == newRightArr.length - 1 && leftArr[i].isEncrypt != 1) {
                                //下拉列表设置默认值
                                leftArr[i].ct = leftArr[i].controlType;
                                setContTypeVal(leftArr[i]);
                                leftArr[i].op = "1";
                                leftArr[i].vf = "1";
                                newLeftArr.push(leftArr[i]);
                            }
                        }
                    }
                }

                //如果列的控件类型 不在查询条件中，默认赋值的时候默认为单行文本框的查询条件
                function setContTypeVal(json) {
                    var controlType = ["1", "15", "3", "11", "4", "17", "18", "19"];
                    var count = 0;
                    for (var h = 0; h < controlType.length; h++) {
                        count++;
                        if (count == controlType.length && controlType[h] != json.ct) {
                            json.ct = "1";
                        }
                    }
                }

                var cols = [
                    {type: 'checkbox'},
                    {id: 'tri', hide: true},
                    {field: 'fieldName', title: '列名', align: "center"},
                    {field: 'fieldDesc', title: '注释', align: "center"},
                    {field: 'fieldType', title: '类型', align: "center"},
                ];
                var colls = [
                    {type: 'checkbox'},
                    {
                        field: 'fieldName', title: '列名', align: "center", templet: function (d) {
                            return '<span style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;display: inline-block;width: 100%;">' + d.fieldName + '</span>';
                        }
                    },
                    {
                        field: 'fieldDesc', width: 150,title: '显示名', align: "center", templet: function (d) {
                            return '<span style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;display: inline-block;width: 100%;">' + d.fieldDesc + '</span>';
                        }
                    },
                    {field: 'fieldType', title: '类型', hide: true, align: "center"},
                    {field: 'ct', width: 150,title: '控件类型', templet: '#controlType', align: "center"},
                    {
                        field: 'op', width: 150,title: '条件', align: "center", templet: function (d) {
                            return getConditionByFieldType(d.fieldType);
                        }
                    },
                    {field: 'vf', width: 150,title: '值来源', templet: '#valueFrom', align: "center"},
                    {
                        fixed: 'right',field: 'title', title: '管理', width: 150, align: 'center',
                        templet: "#rowOperation"
                    }
                ];
                var tabConfig = {'limit': [100], 'height': 390}

                transfer.render({
                    elem: "#querysField", //指定元素
                    cols: cols, //表格列  左侧  支持layui数据表格所有配置
                    colls: colls, //表格列 右侧 支持layui数据表格所有配置
                    data: [newLeftArr, newRightArr], //[左表数据,右表数据[非必填]]
                    tabConfig: tabConfig
                });

                table.on('tool(test)', function (obj) {
                    switch (obj.event) {
                        case 'moveup':
                            var tr = $(this).parent().parent().parent();
                            $(tr).insertBefore($(tr).prev());
                            break;
                        case 'movedown':
                            var tr = $(this).parent().parent().parent();
                            $(tr).insertAfter($(tr).next());
                            break;
                    }
                });
                //回填下拉列表的值
                $(".controlType").each(function (i, item) {
                    $(item).val(newRightArr[i].ct);
                    form.render('select');
                });

                $(".condition").each(function (i, item) {
                    $(item).val(newRightArr[i].op);
                    form.render('select');
                });

                $(".valueFrom").each(function (i, item) {
                    $(item).val(newRightArr[i].vf);
                    form.render('select');
                });

                $(document).on('click', '.btn', function () {
                    $(".controlType").each(function (i, item) {
                        var count = 0;
                        for (var j = 0; j < newRightArr.length; j++) {
                            count++;
                            var field = newRightArr[j].fieldName;
                            var fieldText = $(item).parents("td").prev().prev().prev().children().text();
                            if (fieldText == field) {
                                $(item).val(newRightArr[j].ct);
                                break;
                            }
                            //赋上默认值
                            if (count == newRightArr.length && fieldText != field) {
                                for (var p = 0; p < newLeftArr.length; p++) {
                                    var field = newLeftArr[p].fieldName;
                                    var fieldText = $(item).parents("td").prev().prev().prev().children().text();
                                    if (fieldText == field) {
                                        $(item).val(newLeftArr[p].ct);
                                    }
                                }
                            }
                        }
                    });
                    $(".condition").each(function (i, item) {
                        var count = 0;
                        for (var j = 0; j < newRightArr.length; j++) {
                            count++;
                            var field = newRightArr[j].fieldName;
                            var fieldText = $(item).parents("td").prev().prev().prev().prev().children().text();
                            if (fieldText == field) {
                                $(item).val(newRightArr[j].op);
                                break;
                            }
                            //赋上默认值
                            if (count == newRightArr.length && fieldText != field) {
                                for (var p = 0; p < newLeftArr.length; p++) {
                                    var field = newLeftArr[p].fieldName;
                                    var fieldText = $(item).parents("td").prev().prev().prev().prev().children().text();
                                    if (fieldText == field) {
                                        $(item).val(newLeftArr[p].op);
                                    }
                                }
                            }
                        }
                    });
                    $(".valueFrom").each(function (i, item) {
                        var count = 0;
                        for (var j = 0; j < newRightArr.length; j++) {
                            count++;
                            var field = newRightArr[j].fieldName;
                            var fieldText = $(item).parents("td").prev().prev().prev().prev().prev().children().text();
                            if (fieldText == field) {
                                $(item).val(newRightArr[j].vf);
                                break;
                            }
                            //赋上默认值
                            if (count == newRightArr.length && fieldText != field) {
                                for (var p = 0; p < newLeftArr.length; p++) {
                                    var field = newLeftArr[p].fieldName;
                                    var fieldText = $(item).parents("td").prev().prev().prev().prev().prev().children().text();
                                    if (fieldText == field) {
                                        $(item).val(newLeftArr[p].vf);
                                    }
                                }
                            }
                        }
                    });
                    form.render('select');
                });

                /**
                 * 根据字段类型 返回不同的查询条件
                 * @param fieldType
                 * @returns {string}
                 */
                function getConditionByFieldType(fieldType) {
                    var conditionHtml = "<select class='layui-yonyou-select condition' name='op' lay-filter='condition'> <option value=''></option>"
                    switch (fieldType) {
                        case 'varchar':
                            conditionHtml += "<option value='1'>=</option><option value='2'>!=</option><option value='3'>like</option>";
                            break;
                        case 'number':
                            conditionHtml += "<option value='1'>=</option><option value='2'>&gt;</option><option value='3'>&lt;</option><option value='4'>&gt;=</option><option value='5'>&lt;=</option>";
                            break;
                        case 'date':
                            conditionHtml += "<option value='1'>=</option><option value='2'>&gt;</option><option value='3'>&lt;</option><option value='4'>&gt;=</option><option value='5'>&lt;=</option><option value='6'>日期范围</option>";
                            break;
                        default:
                            conditionHtml += "<option value='1'>=</option><option value='2'>&gt;</option><option value='3'>&lt;</option><option value='4'>&gt;=</option><option value='5'>&lt;=</option>";
                            break;
                    }
                    conditionHtml += "</select>"
                    return conditionHtml;
                }
            })
        </script>
    </body>
</html>